<!--供应商对账明细-->
<template>
  <div class="detail-container">
    <!-- 筛选区域 -->
    <div class="controls-section">
      <button class="btn-new" @click="openCreate">新建</button>
      <div class="filters">
        <div class="filter-item">
          <label>对账单号</label>
          <input v-model="query.reconciliationNo" type="text" placeholder="输入对账单号搜索">
        </div>
      </div>
      <div class="actions">
        <button class="btn-primary" @click="onSearch">搜索</button>
        <button class="btn-secondary" @click="onReset">重置</button>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <table>
        <thead>
          <tr>
            <th><input type="checkbox" v-model="allSelected"></th>
            <th>对账单号</th>
            <th>产品</th>
            <th>本次对账金额</th>
            <th>已付款金额</th>
            <th>待付款金额</th>
            <th>已退回金额</th>
            <th>待退回金额</th>
            <th>关联出库单</th>
            <th>关联入库单</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in details" :key="index">
            <td><input type="checkbox" v-model="item.selected"></td>
            <td class="link-style" @click="viewDetail(item.id)">{{ item.reconciliationNo }}</td>
            <td class="link-style">{{ item.productName || '-' }} {{ item.productCode || '' }}</td>
            <td>{{ toMoney(item.purchaseAmount) }}</td>
            <td>{{ toMoney(item.writtenOffAmount) }}</td>
            <td>{{ toMoney(item.payableAmount) }}</td>
            <td>-</td>
            <td>-</td>
            <td class="link-style">-</td>
            <td class="link-style">{{ item.receiptNo || '-' }}</td>
            <td>-</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 底部区域 -->
    <div class="footer-section">
      <div class="footer-left">
        <input type="checkbox" v-model="allSelected">
        <label>全选</label>
        <button class="btn-secondary">导出</button>
      </div>
      <div class="pagination">
        <button :disabled="query.pageNum===1" @click="changePage(query.pageNum-1)">&lt;</button>
        <button class="active" disabled>{{ query.pageNum }}</button>
        <button :disabled="query.pageNum>=totalPages" @click="changePage(query.pageNum+1)">&gt;</button>
        <select v-model.number="query.pageSize" @change="onSearch">
          <option :value="5">5条/页</option>
          <option :value="10">10条/页</option>
          <option :value="20">20条/页</option>
        </select>
      </div>
    </div>
  </div>
  <SupplierReconciliationDetailCreate :visible="showCreate" @close="showCreate=false" @saved="onSearch" />
  <SupplierReconciliationDetailView :visible="showDetail" :detailId="selectedDetailId" @close="showDetail=false" />
</template>

<script>
import { supplierDetailPage } from '@/api/finance/supplierReconciliationDetail'
import SupplierReconciliationDetailCreate from './SupplierReconciliationDetailCreate.vue'
import SupplierReconciliationDetailView from './SupplierReconciliationDetailView.vue'

export default {
  name: 'SupplierReconciliationDetail',
  components: { SupplierReconciliationDetailCreate, SupplierReconciliationDetailView },
  data() {
    return {
      query: {
        pageNum: 1,
        pageSize: 5,
        reconciliationNo: ''
      },
      total: 0,
      details: [],
      showCreate: false,
      showDetail: false,
      selectedDetailId: null
    };
  },
  computed: {
    allSelected: {
      get() {
        return this.details.length > 0 && this.details.every(item => item.selected);
      },
      set(value) {
        this.details.forEach(item => { item.selected = value; });
      }
    },
    totalPages() {
      return Math.max(1, Math.ceil(this.total / this.query.pageSize))
    }
  },
  mounted() {
    this.onSearch()
  },
  methods: {
    openCreate() {
      this.showCreate = true
    },
    viewDetail(id) {
      this.selectedDetailId = id
      this.showDetail = true
    },
    async onSearch() {
      const payload = { ...this.query }
      const res = await supplierDetailPage(payload)
      const page = res?.data?.data || {}
      this.total = page.total || 0
      this.details = (page.records || []).map(r => ({
        ...r,
        selected: false
      }))
      // 防止当前页超过总页数
      const pages = Math.max(1, Math.ceil(this.total / this.query.pageSize))
      if (this.query.pageNum > pages) this.query.pageNum = pages
    },
    onReset() {
      this.query.pageNum = 1
      this.query.pageSize = 10
      this.query.reconciliationNo = ''
      this.onSearch()
    },
    changePage(n) {
      if (n < 1) return
      const pages = this.totalPages
      if (n > pages) return
      this.query.pageNum = n
      this.onSearch()
    },
    toMoney(v) {
      if (v === null || v === undefined) return '-'
      const num = Number(v)
      if (Number.isNaN(num)) return '-'
      return num.toFixed(2)
    }
  }
}
</script>

<style scoped>
.detail-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.controls-section {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  align-items: center;
}

.btn-new {
    background-color: #409eff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-item label {
  font-size: 14px;
  white-space: nowrap;
}

.filter-item input, .filter-item select {
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 150px;
}

.actions {
  margin-left: auto;
}

.btn-primary {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-secondary {
  background-color: #fff;
  color: #606266;
  border: 1px solid #dcdfe6;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}

.table-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

th {
  background-color: #f8f9fa;
}

.link-style {
    color: #409eff;
    cursor: pointer;
}
.link-style:hover {
    text-decoration: underline;
    color: #337ecc;
}

.footer-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination button {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.pagination button.active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}

.pagination select {
  padding: 6px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
</style>
